<template>
  <div>
    <ul class="list-info-ul">
      <li class="list-info-li" v-for="item in listData" :key="item.ID" @click="newsJump(item.ID)">
        <p>{{item.BI_TITLE}}</p>
        <span>{{item.PUSH_DATE}}</span>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  // props: ['listData'],
  props: {
    listData: {
      type: Array
    }
  },
  data() {
    return {
    }
  },
  methods: {
    newsJump(id) {
      this.$router.push({name: 'router.newsDetails', params:{ id }})
    }
  }
}
</script>
<style lang="scss" scoped>
.list-info-li {
  width: 100%;
  line-height: 42px;
  color: #3d3d65;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px dotted #979797;
  cursor: pointer;
  margin-bottom: 5px;
}
.list-info-li p {
  width: 480px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-info-li p:hover {
  color: #2d87fa;
}
.list-info-li span {
  width: 90px;
  font-size: 14px;
  color: #8b97a2;
  margin-left: 10px;
}
</style>